<template>
	<page-container :isback="true" :base-tab="0" :shownav="true" navtitle="政协" :istabbox="false">
		<view class="content-root content">
			<!-- 证件 begin -->
			<representative-card :auth-type="authType"></representative-card>
			<!-- 证件 end -->
			<!-- 其他 begin -->
			<view class="content-item other">
				<view class="row">
					<view class="grid" @click="myObject('待审查')">
						<image src="/static/img/home/home1.png"></image>
						<view class="title">待审查</view>
						<view class="count">{{ cardData.dsc }}</view>
					</view>
					<view class="grid" @click="myObject('已立案')">
						<image src="/static/img/home/home2.png"></image>
						<view class="title">已立案</view>
						<view class="count">{{ cardData.yla }}</view>
					</view>
					<view class="grid" @click="myObject('办理中')">
						<image src="/static/img/home/home3.png"></image>
						<view class="title">办理中</view>
						<view class="count">{{ cardData.blz }}</view>
					</view>
					<view class="grid" @click="myObject('已办结')">
						<image src="/static/img/home/home4.png"></image>
						<view class="title">已办结</view>
						<view class="count">{{ cardData.ybj }}</view>
					</view>
					<view class="grid" @click="myObject('已延期')">
						<image src="/static/img/home/home5.png"></image>
						<view class="title">已延期</view>
						<view class="count">{{ cardData.yyq }}</view>
					</view>
					<view class="grid" @click="myObject('已关闭')">
						<image src="/static/img/home/home6.png"></image>
						<view class="title">已关闭</view>
						<view class="count">{{ cardData.ygb }}</view>
					</view>
				</view>
			</view>
			<!-- 其他 end -->
			<!-- 建议管理 begin -->
			<view class="content-item advise-list">
				<view class="header">
					<view class="title">建议管理</view>
				</view>
				<view class="row">
					<view class="grid" @click="componentClick('faqi')">
						<image src="/static/img/home/service-1.png"></image>
						<view class="title">发起建议</view>
					</view>
					<view class="grid" @click="componentClick('wotaqide')">
						<image src="/static/img/home/service-2.png"></image>
						<view class="title">历史建议</view>
					</view>
				</view>
			</view>
			<!-- 建议管理 end -->
			<!-- 基层社会治理 begin -->
			<view class="content-item advise-list" v-if="isOpen">
				<view class="header">
					<view class="title">基层社会治理</view>
				</view>
				<view class="row">
					<view class="grid" @click="componentClick('diaoyan')">
						<image src="/static/img/home/serve1.png"></image>
						<view class="title">调研课题登记</view>
					</view>
					<view class="grid" @click="componentClick('yanjiubaogao')">
						<image src="/static/img/home/serve2.png"></image>
						<view class="title">研究报告上传</view>
					</view>
				</view>
			</view>
			<!-- 基层社会治理 end -->
			<!-- 代表述职 begin -->
			<view class="content-item advise-list" v-if="isOpen">
				<view class="header">
					<view class="title">代表述职</view>
				</view>
				<view class="row">
					<view class="grid" @click="componentClick('dangdaibiao')">
						<image src="/static/img/home/serve3.png"></image>
						<view class="title">党代表述职上传</view>
					</view>
				</view>
			</view>
			<!-- 代表述职 end -->
			<!-- 履职绩效 begin -->
			<view class="content-item advise-list">
				<view class="header">
					<view class="title">履职绩效</view>
				</view>
				<view class="row">
					<view class="grid" @click="componentClick('lvzhi')">
						<image src="/static/img/home/serve4.png"></image>
						<view class="title">履职情况明细</view>
					</view>
					<view class="grid" @click="componentClick('baogaodaochu')">
						<image src="/static/img/home/serve5.png"></image>
						<view class="title">履职报告导出</view>
					</view>
				</view>
			</view>
			<!-- 履职绩效 end -->
			<!-- 其他资料上传 begin -->
			<view class="content-item advise-list" v-if="isOpen">
				<view class="header">
					<view class="title">其他资料上传</view>
				</view>
				<view class="row">
					<view class="grid" @click="componentClick('lianxi')">
						<image src="/static/img/home/serve6.png"></image>
						<view class="title">党代表联系服务<br>群众工作记录表</view>
					</view>
				</view>
			</view>
			<!-- 其他资料上传 end -->
			<!-- 其他 begin -->
			<view class="content-item advise-list">
				<view class="header">
					<view class="title">其他</view>
				</view>
				<view class="row" @click="componentClick('xuexi')">
					<view class="grid">
						<image src="/static/img/home/serve7.png"></image>
						<view class="title">学习专区</view>
					</view>
				</view>
			</view>
			<!-- 其他 end -->
		</view>
		<u-loading-page :loading="loading"></u-loading-page>
	</page-container>
	<!-- 证件详情 -->
</template>

<script>
	import {
		detailMixins
	} from "@/pages/home/detailMixins";
	import representativeCard from "@/components/representativeCard.vue";
	import {
		getQueryHeaders,
		requestGet
	} from "@/util/means/request";
	import {
		GetPerformingInfo
	} from "@/api/document";

	export default {
		mixins: [detailMixins],
		components: {
			representativeCard
		},
		data() {
			return {
				// 1人大代表建议,2政协委员建议,3党代表建议
				authType: '2',
				loading: false,
				cardData: {},
				// 开关显示
				isOpen: false
			}
		},
		onLoad() {
			this.getPerformingInfo()
		},
		methods: {
			myObject(sName) {
				console.log(sName, "状态名称================");
				uni.navigateTo({
					url: '/pages/historicalSuggestion/index?authType=' + this.authType + "&sName=" + sName
				})
			},
			componentClick(type) {
				if (type === "faqi") {
					this.initiateAProposal()
				} else if (type === "wotaqide") {
					this.shouHistorySuggestion()
				} else if (type === "xuexi") {
					this.$jump.toJump('/pages/message/xxzq?type=2')
				} else {
					uni.$u.toast('功能正在开发中...')
				}
			},
			getPerformingInfo() {
				this.loading = true
				let ower = this
				let {
					authType
				} = this
				requestGet({
					url: GetPerformingInfo,
					data: {
						authType
					},
					header: getQueryHeaders()
				}).then(res => {
					ower.cardData = res
				}).finally(res => {
					ower.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-root {
		padding: 20rpx;
		overflow: auto;
		//width: 100%;
		height: 100%;
	}

	.documents-detail {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		background-color: $bg-color-white;
		border-radius: $border-radius-lg;

		image {
			width: 100%;
			height: 400rpx;
			border-radius: $border-radius-lg;
		}

		.detail {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			margin: 20rpx 0;
		}
	}

	.content-item:last-child {
		margin-bottom: 20rpx;
	}

	.content-item {
		width: 100%;

		margin-top: 20rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-size: $font-size-lg;
				font-weight: 500;
			}

			.subtitle {
				font-size: $font-size-base;
				color: $text-color-grey;
			}
		}

		.row {
			display: flex;
			flex-wrap: wrap;

			.grid {
				// width: 50%;
				display: flex;
				// flex-direction: column;
				align-items: center;
				// padding: 20rpx;

				.title {
					font-size: $font-size-base;
					display: flex;
					align-items: baseline;
				}
			}
		}
	}

	.other {
		background-color: $bg-color-white;
		border-radius: $border-radius-lg;

		.row {
			display: flex !important;
			flex-wrap: wrap !important;
			align-items: flex-start !important;
			align-content: flex-start !important;
			justify-content: space-around !important;
			padding: 10rpx;

			.grid {
				justify-content: space-between;
				width: 46%;
				padding: 20rpx;
				margin: 10rpx 0;
				border-radius: $border-radius-lg;
				box-sizing: border-box;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: $border-radius-lg;
				}

				.title {
					margin-left: -50rpx;
					font-size: 28rpx;
				}

				.count {
					font-size: 32rpx;
				}
			}

			.grid:nth-child(odd) {
				color: #e66611 !important;
				background: linear-gradient(to right, #fcecdb, #f7d1b7);
			}

			.grid:nth-child(even) {
				color: #d81d06 !important;
				background: linear-gradient(to right, #f7d1b7, #f4bfb7);
			}
		}
	}

	.advise-list {
		.row {
			display: flex !important;
			flex-wrap: wrap !important;
			align-items: flex-start !important;
			align-content: flex-start !important;
			justify-content: space-between !important;
			padding: 10rpx;

			.grid {
				background: #fff;
				// justify-content: space-between;
				width: 48%;
				padding: 20rpx;
				margin: 10rpx 0;
				border-radius: $border-radius-lg;
				box-sizing: border-box;

				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: $border-radius-lg;
				}

				.title {
					//background-color: red;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>